<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../layuiadmin/layui/css/layui.css"
	media="all">
<!--  <link rel="stylesheet" href="../layuiadmin/style/admin.css" media="all">-->
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>

<body>
	<div class="demoTable">
		模糊检索：
		<div class="layui-inline">
			<input class="layui-input" name="id" id="demoReload"
				autocomplete="off">
		</div>
		<button class="layui-btn" data-type="reload">搜索</button>
	</div>

	<table class="layui-hide" id="test" lay-filter="test"></table>



	<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>

	<script src="../layuiadmin/layui/layui.js"></script>
	<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

	<script>
        layui.use('table', function () {
            var table = layui.table;

            table.render({
                elem: '#test',//
                url: '../../orderapi/pagedata',//模拟接口
                toolbar: '#toolbarDemo',
                title: '订单数据表',
                cols: [[{ type: 'checkbox', fixed: 'left' },
                {field: 'orderid', width: 80, title: '订单ID', sort: true},
                {field: 'orderno', width: 300, title: '订单编号', sort: false},
                {field: 'tel',  width: 130, title: '手机号', sort: false,
                	templet: function (d) {
                		return d.user.tel;
                	}
                },
                {field: 'username', width: 100, title: '用户姓名', sort: false,
                    templet: function (d) {
                        return d.user.username;
                    }
                },
                {field: 'orderprice', width: 100, title: '价格/￥'},
                {field: 'orderstatus', width: 100, title: '订单状态', 
                	templet: function(d) {
                		return d.orderstatus == 1 ? "已完成" : "已取消";
                	}
                },
                {field: 'attid', width: 80, title: '景点ID'},
                {field: 'orderdate', title: '下单时间',  minWidth: 180},
                //{ field: 'orderDate', title: '预定天数' }, 
                {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}]],
                page: true,
                id: 'testReload'
            });

            //头工具栏事件
            table.on('toolbar(test)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                //					switch(obj.event) {
                //						case 'getCheckData':
                //							var data = checkStatus.data;
                //							layer.alert(JSON.stringify(data));
                //							break;
                //						case 'getCheckLength':
                //							var data = checkStatus.data;
                //							layer.msg('选中了：' + data.length + ' 个');
                //							break;
                //						case 'isAll':
                //							layer.msg(checkStatus.isAll ? '全选' : '未全选');
                //							break;
                //					};
            });

			<!--搜索框的模糊检索功能-->
			var $ = layui.$, active = {
                reload: function () {
                    var demoReload = $('#demoReload');
                    //执行重载
                    table.reload('testReload', {
                        page: {
                            curr: 1
                            //重新从第 1 页开始
                        },
                        where: {
							/* key: {  //key可以看成是一个对象，大括号里可以有多对键和值，
							   id: demoReload.val()//id是自己写的模糊查询方法的参数名
							 }*/
                            content: demoReload.val()
                        }
                    });
                }
            };
            $('.demoTable .layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

            //监听行工具事件
            table.on('tool(test)', function (obj) {
                var data = obj.data;
                //console.log(obj)
                if (obj.event === 'del') {
                    layer.confirm('真的删除行么', function (index) {
                        obj.del();
                        layer.close(index);
                    });
                } else if (obj.event === 'edit') {
                    layer.prompt({
                        formType: 2,
                        value: data.email
                    }, function (value, index) {
                        obj.update({
                            email: value
                        });
                        layer.close(index);
                    });
                }
            });
        });
    </script>

</body>

</html>